<script lang="ts" setup generic="T">
import type { BaseEntity, DialogModel } from '@/index.d';
import HqRow from '../col/HqRow.vue';
import type { PropType } from 'vue';

const props = defineProps({
  operateRecord: Boolean,
  operation: Object as PropType<BaseEntity>
});

const dialogModel = defineModel<DialogModel<T>>('dialogModel', {
  required: true
});

const emit = defineEmits<{
  (e: 'submit'): void;
}>();

const headText = computed<string>(() => {
  switch (dialogModel.value.type) {
    case 'view':
      return `查看${dialogModel.value.title}`;
    case 'insert':
      return `新增${dialogModel.value.title}`;
    case 'update':
      return `修改${dialogModel.value.title}`;
  }
});

const fullScreen = ref<boolean>(false);

const changeFullScreen = () => (fullScreen.value = !fullScreen.value);
</script>
<template>
  <el-dialog
    v-model="dialogModel.visible"
    draggable
    destroy-on-close
    :show-close="false"
    :close-on-click-modal="false"
    :fullscreen="fullScreen"
    width="60%"
    top="100px"
    v-bind="$attrs"
    class="hq-dialog"
  >
    <template #header>
      <div class="hq-dialog-header">
        <div class="ha-dialog-header-content">
          <slot name="header"> {{ headText }}</slot>
        </div>
        <div class="ha-dialog-header-button">
          <svg-icon v-if="fullScreen" name="modelFullscreenClose" @click="changeFullScreen" />
          <svg-icon v-else name="modelFullscreenOpen" @click="changeFullScreen" />
        </div>
      </div>
    </template>
    <template #default>
      <el-scrollbar height="70vh">
        <el-space fill wrap>
          <slot></slot>
          <el-card shadow="hover" v-if="dialogModel.type !== 'insert' && props.operateRecord">
            <template #header>操作记录</template>
            <template #default>
              <HqRow>
                <hq-col>
                  <el-form-item label="创建人员">
                    <el-text>{{ props.operation?.creator?.name }}</el-text>
                  </el-form-item>
                </hq-col>
                <hq-col>
                  <el-form-item label="创建时间">
                    <el-text>{{ props.operation?.createTime }}</el-text>
                  </el-form-item>
                </hq-col>
                <hq-col>
                  <el-form-item label="更新人员">
                    <el-text>{{ props.operation?.updater?.name }}</el-text>
                  </el-form-item>
                </hq-col>
                <hq-col>
                  <el-form-item label="更新时间">
                    <el-text>{{ props.operation?.updateTime }}</el-text>
                  </el-form-item>
                </hq-col>
              </HqRow>
            </template>
          </el-card>
        </el-space>
      </el-scrollbar>
    </template>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="success" @click="emit('submit')" v-if="dialogModel.type !== 'view'">
          确认
        </el-button>
        <el-button type="danger" @click="dialogModel.visible = false"> 关闭 </el-button>
      </div>
    </template>
  </el-dialog>
</template>
<style lang="scss" scoped>
.el-dialog {
  .hq-dialog-header {
    display: flex;
    justify-content: space-between;
  }

  .el-scrollbar {
    padding-right: 10px;
    .el-space {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
